<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*多个选择器之间以逗号分割，表示这些选择器所匹配到的所有的元素的并集*/
        /*集体声明，只要符合当中的一个即可生效*/
        #mydiv,.myp,h2{
            background:pink;
        }

        /*空格表示后代关系*/
        div span{
            /*color:green;*/
        }

        /*>表示的是父子关系*/
        div > span{
            color:pink;
        }

        /*与div标签是同一级别，并且紧跟在div后面的那个h3元素*/
        div + h3{
            background:greenyellow;
        }

        /*与div同一级别，并且在div后面的所有的h4元素*/
        div ~ h4{
            background:yellow;
        }
    </style>
</head>
<body>
    <h4>h4</h4>
    <h4>h4</h4>
    <div>div01</div>
    <div id="mydiv">div02</div>
    <div>div03</div>
    <div>div04</div>
    <p>p01</p>
    <p>p02</p>
    <p class="myp">p03</p>
    <p>p04</p>
    <p>p05</p>
    <p>p06</p>
    <h2>h2</h2>
    <h3>h3</h3>
    <h3>h3</h3>
    <h3>h3</h3>
    <h2>h2</h2>
    <h2>h2</h2>
    <h2>h2</h2>
    <ul>
        <li>li01</li>
        <li>li02</li>
        <li>li03</li>
        <li>li04</li>
        <li>li05</li>
    </ul>
    <div>
        <span>s1</span>
        <p>
            <span>s2</span>
            <span>s3</span>
        </p>
    </div>
    <div>div01</div>
    <div>div02</div>
    <div>div03</div>
    <h3>h3</h3>
    <h3>h3</h3>
    <h4>h4</h4><h4>h4</h4><h4>h4</h4><h4>h4</h4><h4>h4</h4>
    <h3>h3</h3>
    <div>div04</div>
    <div>div05</div>
    <div>
        <div>divaaa</div>
        <h3>h3</h3>
        <h3>h3</h3>
        <h3>h3</h3>
    </div>
    <h4>h401</h4><h4>h402</h4><h4>h403</h4><h4>h404</h4><h4>h405</h4>
    <div>
        <h4>h4</h4><h4>h4</h4><h4>h4</h4><h4>h4</h4><h4>h4</h4>
    </div>
</body>
</html>